<template>
	<view class="container">
		<!-- 顶部筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item">推荐</view>
			<picker class="filter-item" :range="cities" :value="cityIndex" @change="onCityChange">
				<view>{{ cities[cityIndex] }}</view>
			</picker>
			<picker class="filter-item" :range="types" :value="typeIndex" @change="onTypeChange">
				<view>{{ types[typeIndex] }}</view>
			</picker>
			<input class="search-input" placeholder="请输入关键词" />
		</view>
		<!-- 牛人列表 -->
		<view class="talent-list">
			<view class="talent-item" v-for="item in talents" :key="item.id">
				<image class="avatar" :src="item.avatar" />
				<view class="talent-header">
					<text class="name">{{ item.name }}</text>
					<text class="real" v-if="item.real">已实名</text>
					<text class="niu">牛人</text>
				</view>
				<view class="talent-info">
					<text>{{ item.gender }} | {{ item.age }}岁 | {{ item.exp }}年 | {{ item.city }}</text>
				</view>
				<view class="talent-desc">{{ item.desc }}</view>
				<view class="talent-tags">
					<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
				</view>
				<view class="talent-bottom">
					<view class="talent-salary">{{ item.salary }}</view>
					<button class="call-btn">致电</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const cities = ['天津', '北京'];
const types = ['操作工', '普工', '销售', '搬运工'];
const cityIndex = ref(0);
const typeIndex = ref(0);
function onCityChange(e) {
	cityIndex.value = e.detail.value;
}
function onTypeChange(e) {
	typeIndex.value = e.detail.value;
}
// 牛人数据表（10条）
const talents = [
	{ id: 1, name: '李国友', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 47, exp: 10, city: '天津', desc: '本人无不良嗜好，耐心工作，从事本行业多年，经验丰富。', tags: ['操作工', '普工', '面议'], salary: '4000-6000/月', real: true },
	{ id: 2, name: '王伟', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 35, exp: 8, city: '天津', desc: '吃苦耐劳，服从安排，经验丰富。', tags: ['普工', '搬运工', '面议'], salary: '5000-7000/月', real: true },
	{ id: 3, name: '张敏', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 29, exp: 5, city: '天津', desc: '认真负责，适应能力强。', tags: ['操作工', '销售', '面议'], salary: '4000-5000/月', real: false },
	{ id: 4, name: '赵强', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 40, exp: 15, city: '天津', desc: '多年工厂经验，能吃苦。', tags: ['普工', '装卸工', '面议'], salary: '6000-8000/月', real: true },
	{ id: 5, name: '刘洋', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 32, exp: 7, city: '天津', desc: '责任心强，团队合作。', tags: ['销售', '操作工', '面议'], salary: '4500-6000/月', real: false },
	{ id: 6, name: '孙丽', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 38, exp: 12, city: '天津', desc: '沟通能力好，执行力强。', tags: ['普工', '搬运工', '面议'], salary: '5000-6500/月', real: true },
	{ id: 7, name: '周杰', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 45, exp: 20, city: '天津', desc: '经验丰富，能吃苦耐劳。', tags: ['装卸工', '普工', '面议'], salary: '7000-9000/月', real: true },
	{ id: 8, name: '吴敏', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 30, exp: 6, city: '天津', desc: '认真细致，适应能力强。', tags: ['操作工', '销售', '面议'], salary: '4000-5500/月', real: false },
	{ id: 9, name: '郑伟', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 36, exp: 9, city: '天津', desc: '团队合作，执行力强。', tags: ['搬运工', '普工', '面议'], salary: '5000-7000/月', real: true },
	{ id: 10, name: '钱芳', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 28, exp: 4, city: '天津', desc: '学习能力强，积极向上。', tags: ['销售', '操作工', '面议'], salary: '4000-5000/月', real: false }
];
</script>

<style scoped>
.container { padding: 16rpx; }
.filter-bar { display: flex; align-items: center; margin-bottom: 16rpx; }
.filter-item { flex: 1; text-align: center; }
.search-input { flex: 2; border: 1px solid #eee; border-radius: 8rpx; padding: 8rpx; margin-left: 8rpx; }
.talent-list { }
.talent-item { background: #fff; margin-bottom: 12rpx; padding: 12rpx; border-radius: 8rpx; }
.avatar { width: 60rpx; height: 60rpx; border-radius: 50%; margin-bottom: 8rpx; }
.talent-header { display: flex; align-items: center; margin-bottom: 4rpx; }
.name { font-weight: bold; font-size: 28rpx; margin-right: 8rpx; }
.real { color: #1890ff; font-size: 22rpx; margin-right: 8rpx; }
.niu { color: #faad14; font-size: 22rpx; }
.talent-info { color: #888; font-size: 22rpx; margin-bottom: 4rpx; }
.talent-desc { color: #333; font-size: 24rpx; margin-bottom: 8rpx; }
.talent-tags { margin-bottom: 8rpx; }
.tag { background: #f0f0f0; color: #007aff; border-radius: 6rpx; padding: 2rpx 10rpx; margin-right: 8rpx; font-size: 22rpx; }
.tag.blue { background: #e6f7ff; color: #1890ff; }
.talent-salary { color: #faad14; font-size: 24rpx; margin-bottom: 8rpx; }
.call-btn { background: #1890ff; color: #fff; border: none; border-radius: 8rpx; padding: 6rpx 18rpx; font-size: 24rpx; }
</style>
